/*
 * @Author: FengKongLi 
 * @Date: 2021-08-25 11:20:47 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-25 20:21:00
 */
// 审核大厅--实名认证页面
<template>
  <div>
      <!-- 查询 -->
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            value-format="timestamp"
            v-model="dataValue"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-select
            clearable
            v-model="searchForm.status"
            placeholder="请选择状态"
          >
            <el-option label="通过" value="通过"></el-option>
            <el-option label="不通过" value="不通过"></el-option>
            <el-option label="未审核" value="未审核"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item>
            <el-input clearable
            v-model="searchForm.userId"
            placeholder="申请人编号"></el-input>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据展示 -->
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80px"> </el-table-column>
        <el-table-column prop="userId" label="申请人编号" width="100px"> </el-table-column>
        <el-table-column prop="realname" label="姓名" width="80px"> </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" :formatter="fmtTableDateDay" width="160px"> </el-table-column>
        <el-table-column prop="idCard" label="身份证号" width="170px"> </el-table-column>
        <el-table-column label="身份证正面" width="100px" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 50px"
              :src="scope.row.idcardbankCardPhotoPositive"
              :preview-src-list="[scope.row.idcardbankCardPhotoPositive]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="身份证反面" width="100px" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 50px"
              :src="scope.row.idcardbankCardPhotoNegative"
              :preview-src-list="[scope.row.idcardbankCardPhotoNegative]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="bankCard" label="银行卡号" align="center">
        </el-table-column>
        <el-table-column label="银行卡" width="70" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 30px"
              :src="scope.row.bankCardPhoto"
              :preview-src-list="[scope.row.bankCardPhoto]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center" width="80px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '通过'" type="success">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else-if="scope.row.status === '不通过'" type="danger">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else type="info">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="130" align="center">
          <template slot-scope="scope">
            <div v-show="scope.row.status === '未审核'">
              <el-button @click="toPass(scope.row.id)" type="text"
                >通过</el-button
              >
              <el-button @click="toNoPass(scope.row.id)" type="text"
                >不通过</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
     <!-- 分页 -->
    <div class="page-div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  pageQueryCertificationApply,
  checkPass,
  checkNoPass,
} from "@/api/certification";
import { fmtTableDateDay } from "@/filters/index";
export default {
  data() {
    return {
         // 时间格式
      fmtTableDateDay,
      tableData: {},
      //分页参数
      params: {
        page: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      searchForm:{},
     
       //   时间数组
      dataValue: [],
       //   日期时间选择器数据处理
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    // 深度监听分页参数,当多少条/页发生变化时重新请求数据
    params: {
      handler() {
        this.getCertificationData();
      },
      deep: true,
    },
  },
  created() {
    this.getCertificationData();
  },
  methods: {
    async getCertificationData() {
      let res = await pageQueryCertificationApply(this.params);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
     //每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      this.params.page = val;
    },
   async toPass(id){
       let res = await checkPass({id});      
       if(res.status==200){
           this.status="通过";
           this.$notify({
               title: "审核通过",
                message: res.message,
                type: "success",
           });
       }
       this.getCertificationData();
    },
    async toNoPass(id){
       let res = await checkNoPass({id});
       if(res.status==200){
           this.status="不通过";
           this.$notify({
               title: "审核不通过",
                message: res.message,
                type: "success",
           });
       }
       this.getCertificationData();
    },
    // 点击查询按钮
    async toSearch() {
      let temp = {
        ...this.params,
        ...this.searchForm,
      };
      if (this.dataValue) {
        if (this.dataValue.length > 0) {
          temp.beginTime = this.dataValue[0];
          temp.endTime = this.dataValue[1];
        }
      }
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await pageQueryCertificationApply(temp);
      
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    
  },
};
</script>

<style scoped>
</style>